<template>
  <div class="shebao-detail-list">
    <a-button icon="left" type="link" @click="$router.go(-1)">返回</a-button>
    <a-row class="content-top">
      <!-- <step :current="1" /> -->
    </a-row>
    <navItem :options="tabs" @change="handleNav" />
    <!-- start -->
    <a-button type="primary" :disabled="!hasSelected" @click="deleteLits"> 批量删除 </a-button>
    <div class="table-box">
      <a-table
        :row-selection="{
          selectedRowKeys: selectedRowKeys,
          onChange: onSelectChange
        }"
        :columns="columns"
        :data-source="dataSource"
        :pagination="pagination"
        :row-key="(a, b) => b"
        class="mg_t24"
        @change="handlePage"
      >
        <template slot="customName" slot-scope="text, record">
          <img v-if="record.noError" style="width: 24px" src="@/assets/img/shebaopaidan/Info2@2x.png" alt />
          <img v-else style="width: 24px" src="@/assets/img/shebaopaidan/Info-Circle@2x.png" alt />
          {{ record.name }}
        </template>
        <template slot="socEndDate" slot-scope="record">{{ moment(record).format("YYYY-MM-DD") }}</template>
        <template slot="fundEndDate" slot-scope="record">{{ moment(record).format("YYYY-MM-DD") }}</template>
        <template slot="assignCompanyName" slot-scope="record">
          <span class="primary">{{ record ? record : "--" }}</span>
        </template>
        <template slot="action" slot-scope="record">
          <span class="primary" @click="deleteItem(record)">删除</span>
        </template>
      </a-table>
    </div>
    <editor-modal :show="editorShow" :options="editorOptions" @change="editorCb" />
    <!-- end -->

    <a-row class="foot">
      <a-button type="primary" @click="reUpload">重新上传</a-button>
      <a-button :disabled="!dataSource.length" @click="upload">派单</a-button>
    </a-row>
  </div>
</template>

<script>
const rowSelection = {
  onChange: (selectedRowKeys, selectedRows) => {},
  onSelect: (record, selected, selectedRows) => {},
  onSelectAll: (selected, selectedRows, changeRows) => {}
};
const columns = [
  {
    title: "姓名",
    dataIndex: "name",
    fixed: "left",
    scopedSlots: { customRender: "customName" }
  },
  { title: "参保城市", dataIndex: "socCityName" },
  { title: "身份证号", dataIndex: "idCard", width: 200 },
  { title: "参保方案", dataIndex: "socProgName" },
  {
    title: "社保停缴时间",
    dataIndex: "socEndDate",
    scopedSlots: { customRender: "socEndDate" }
  },
  {
    title: "公积金停缴时间",
    dataIndex: "fundEndDate",
    scopedSlots: { customRender: "fundEndDate" }
  },
  {
    title: "指派公司",
    dataIndex: "assignCompanyName",
    scopedSlots: { customRender: "assignCompanyName" }
  },
  { title: "操作", dataIndex: "", scopedSlots: { customRender: "action" } }
];
import step from "./common/step";
import navItem from "./common/nav-item";
import editorModal from "./common/editor-modal";
export default {
  name: "ShebaoDetailList",
  components: {
    // step,

    navItem,
    editorModal
  },
  data() {
    return {
      selectedRowKeys: [],
      editorShow: false,
      editorOptions: {},
      columns,
      rowSelection,
      tabs: {},
      pagination: {
        pageSize: 10,
        current: 1,
        total: 0
      },
      titles: {},
      dataSource: [],
      params: {
        pageNo: 1,
        pageSize: 10
      }
    };
  },
  computed: {
    hasSelected() {
      return this.selectedRowKeys.length > 0;
    }
  },
  created() {
    this.getList();
    this.getNavs();
  },
  methods: {
    onSelectChange(selectedRowKeys) {
      this.selectedRowKeys = selectedRowKeys;
    },
    deleteLits() {
      const data = [];
      this.selectedRowKeys.map((item) => {
        data.push(this.dataSource[item].id);
      });
      this.$confirm({
        title: "确定批量删除?",
        okType: "danger",
        onOk: () => {
          this.$request({
            url: `/hr/api/v1/socDispatchEmpLesses`,
            data,
            method: "delete"
          }).then(({ success }) => {
            if (success) {
              this.selectedRowKeys = [];
              this.$notification["success"]({ message: "删除成功" });
              this.getList();
              this.getNavs();
            }
          });
        }
      });
    },
    editorCb(e) {
      this.editorShow = false;
      this.editorOptions = e.options;
      const soceItem =
        this.$route.query.addOrLess === "true"
          ? this.editorOptions.socDispatchEmpItemList || []
          : this.editorOptions.socProgItemVOList || [];
      this.editorOptions.itemUpdateList = soceItem.map((item) => {
        return {
          baseAmount: item.cardinalityDefault,
          itemName: item.itemName
        };
      });
      if (e.onOk) {
        this.$request({
          url: `/hr/api/v1/socDispatchEmpAdds/updateEmpAndItem`,
          method: "put",
          data: e.options
        }).then(({ success }) => {
          if (success) {
            this.getList();
            this.getNavs();
          }
        });
      }
    },
    getList() {
      this.$request({
        url: `/hr/api/v1/socDispatchEmpLesses`,
        params: {
          ...this.params,
          socDispatchId: this.$route.query.id,
          showItem: true
        }
      }).then(({ data }) => {
        this.dataSource = data.entities;
        this.pagination.total = data.entityCount;
      });
    },
    getNavs() {
      this.$request({
        url: `/hr/api/v1/socDispatches/findDetails/${this.$route.query.id}`
      }).then(({ data }) => {
        this.tabs = data;
      });
    },
    handleNav(e) {},
    selectItem(e) {},
    handlePage(e) {
      this.params.pageNo = e.current;
      this.getList();
    },
    // 重新上传
    reUpload() {
      this.$router.push({ path: "/shebao/shebaoPaidan/shebaoUpload" });
    },
    // 派单
    upload() {
      this.$request({
        url: `/hr/api/v1/socDispatches/dispatchSend/${this.$route.query.id}`,
        method: "put"
      })
        .then(({ success, data }) => {
          if (success) {
            this.$router.push({
              path: "/shebao/shebaoPaidan/shebao-detail-add-third",
              query: {
                unSendCount: this.pagination.total,
                ...this.$route.query,
                data
              }
            });
          }
        })
        .catch((err) => {
          console.log("debug log --> ", err);
          throw err;
        });
    },
    expandChange(expanded, record) {},
    // 编辑
    editor(type) {
      this.editorShow = true;
      this.editorOptions = type;
    },
    // 参保记录
    history(e) {}, // 删除item
    deleteItem({ id }) {
      this.$confirm({
        title: "确定删除?",
        okType: "danger",
        onOk: () => {
          this.$request({
            url: `/hr/api/v1/socDispatchEmpLesses/${id}`,
            method: "delete"
          }).then(({ success }) => {
            if (success) {
              this.$notification["success"]({ message: "删除成功" });
              this.getList();
            }
          });
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.shebao-detail-list {
  padding: 24px;
  .content-top {
    margin-top: 24px;
    padding: 40px 162px;
    background: #fafafa;
    border-radius: 4px;
  }
  .salary {
    cursor: pointer;
    margin: 24px 0;
    .item {
      padding: 24px;
      text-align: center;
      border: 1px solid #ccc;
      border-radius: 4px;
    }
  }
  .foot {
    height: 64px;
    line-height: 64px;
    text-align: end;
  }
  .center {
    text-align: center;
  }
  .info-left {
    border-right: 1px solid #ccc;
    padding: 20px 56px 30px 0;
    width: 350px;

    .info-item {
      line-height: 34px;
    }
    .name {
      margin-top: 16px;
    }
  }
  .inner-right-foot {
    padding: 16px;
  }
  .table-box {
    overflow: auto;
  }
}
</style>
